<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="header-icon iconfont">&#xe6a0;</text>
      </view>
      <text class="title">全部评论 ({{ comments.length }})</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <view class="dish-header">
        <text class="dish-name">{{ dish.name }}</text>
        <view class="dish-rating">
          <text class="rating-score">{{ dish.rating }}</text>
          <text class="rating-star">★</text>
        </view>
      </view>
      
      <view class="rating-distribution">
        <view class="distribution-header">
          <text class="distribution-title">评分分布</text>
          <text class="distribution-count">{{ comments.length }}人评分</text>
        </view>
        
        <view class="distribution-bars">
          <view class="distribution-bar" v-for="i in 5" :key="i">
            <text class="bar-label">{{ 6-i }}星</text>
            <view class="bar-container">
              <view class="bar-fill" :style="{ width: getDistributionPercentage(6-i) + '%' }"></view>
            </view>
            <text class="bar-percentage">{{ getDistributionPercentage(6-i) }}%</text>
          </view>
        </view>
      </view>
      
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index" 
          :class="['filter-tab', activeTab === index ? 'active-tab' : '']"
          @click="activeTab = index"
        >
          {{ tab.name }} {{ tab.count > 0 ? `(${tab.count})` : '' }}
        </view>
      </view>
      
      <view class="comment-list">
        <view class="comment-item" v-for="(comment, index) in filteredComments" :key="index">
          <view class="comment-header">
            <view class="comment-user">
              <image class="user-avatar" :src="comment.avatar"></image>
              <text class="user-name">{{ comment.username }}</text>
            </view>
            <view class="comment-rating">
              <text class="rating-star" v-for="i in 5" :key="i">
                {{ i <= comment.rating ? '★' : '☆' }}
              </text>
            </view>
          </view>
          
          <text class="comment-text">{{ comment.content }}</text>
          
          <view class="comment-images" v-if="comment.images && comment.images.length > 0">
            <image 
              v-for="(image, imgIndex) in comment.images" 
              :key="imgIndex" 
              :src="image" 
              class="comment-image" 
              mode="aspectFill"
              @click="previewImage(comment.images, imgIndex)"
            ></image>
          </view>
          
          <view class="comment-footer">
            <text class="comment-date">{{ comment.date }}</text>
            <view class="comment-actions">
              <text class="action-item" @click="likeComment(index)">
                <text class="action-icon">{{ comment.liked ? '&#xe6a4;' : '&#xe6a5;' }}</text>
                <text class="action-count">{{ comment.likes || 0 }}</text>
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      activeTab: 0,
      filterTabs: [
        { name: '全部', count: 0 },
        { name: '好评', count: 0 },
        { name: '差评', count: 0 },
        { name: '有图', count: 0 }
      ],
      dish: {
        id: 1,
        name: '现磨豆浆',
        rating: 4.5
      },
      comments: [
        {
          username: '张同学',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 5,
          content: '豆浆很香浓，没有豆腥味，每天早上必买！',
          date: '2023-10-15',
          likes: 12,
          liked: false,
          images: ['https://images.unsplash.com/photo-1551326844-4df70f78d0e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3']
        },
        {
          username: '李同学',
          avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 4,
          content: '味道不错，就是有时候温度不够热。希望能保持恒温，这样口感会更好。',
          date: '2023-10-14',
          likes: 5,
          liked: false
        },
        {
          username: '王同学',
          avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 4.5,
          content: '豆浆很新鲜，口感醇厚，价格也很实惠。希望能多一些口味选择，比如添加黑芝麻或者核桃的。',
          date: '2023-10-12',
          likes: 8,
          liked: false,
          images: [
            'https://images.unsplash.com/photo-1551326844-4df70f78d0e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
            'https://images.unsplash.com/photo-1553787499-6f9133242821?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3'
          ]
        },
        {
          username: '赵同学',
          avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 2,
          content: '今天的豆浆有点稀，不如以前浓稠，希望能保持品质。',
          date: '2023-10-10',
          likes: 3,
          liked: false
        }
      ]
    }
  },
  computed: {
    filteredComments() {
      switch(this.activeTab) {
        case 1: // 好评
          return this.comments.filter(comment => comment.rating >= 4);
        case 2: // 差评
          return this.comments.filter(comment => comment.rating < 3);
        case 3: // 有图
          return this.comments.filter(comment => comment.images && comment.images.length > 0);
        default: // 全部
          return this.comments;
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = parseInt(options.id);
      // 在实际应用中，这里应该根据ID从服务器获取菜品详情和评论
      // 这里为了演示，使用模拟数据
    }
    
    // 计算各个标签的数量
    this.filterTabs[1].count = this.comments.filter(comment => comment.rating >= 4).length;
    this.filterTabs[2].count = this.comments.filter(comment => comment.rating < 3).length;
    this.filterTabs[3].count = this.comments.filter(comment => comment.images && comment.images.length > 0).length;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getDistributionPercentage(stars) {
      const count = this.comments.filter(comment => Math.floor(comment.rating) === stars).length;
      const percentage = (count / this.comments.length) * 100 || 0;
      return Math.round(percentage);
    },
    likeComment(index) {
      const comment = this.comments[index];
      if (!comment.liked) {
        comment.likes = (comment.likes || 0) + 1;
        comment.liked = true;
      } else {
        comment.likes = Math.max(0, comment.likes - 1);
        comment.liked = false;
      }
    },
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #FAFAFA;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  width: 60rpx;
}

.header-icon {
  font-family: "iconfont";
  color: #FFFFFF;
  font-size: 40rpx;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.dish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.dish-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
}

.dish-rating {
  display: flex;
  align-items: center;
}

.rating-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF7A45;
}

.rating-star {
  color: #FF7A45;
  font-size: 36rpx;
  margin-left: 8rpx;
}

.rating-distribution {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.distribution-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.distribution-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
}

.distribution-count {
  font-size: 28rpx;
  color: #8C8C8C;
}

.distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.distribution-bar {
  display: flex;
  align-items: center;
}

.bar-label {
  width: 80rpx;
  font-size: 28rpx;
  color: #595959;
}

.bar-container {
  flex: 1;
  height: 16rpx;
  background-color: #F0F0F0;
  border-radius: 8rpx;
  margin: 0 20rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background-color: #FFA940;
  border-radius: 8rpx;
}

.bar-percentage {
  width: 60rpx;
  font-size: 24rpx;
  color: #8C8C8C;
  text-align: right;
}

.filter-tabs {
  display: flex;
  margin-bottom: 30rpx;
  overflow-x: auto;
  white-space: nowrap;
}

.filter-tab {
  padding: 12rpx 24rpx;
  margin-right: 16rpx;
  background-color: #F0F0F0;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #595959;
}

.active-tab {
  background-color: #FF7A45;
  color: #FFFFFF;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.comment-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.comment-user {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  margin-left: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #262626;
}

.comment-rating {
  display: flex;
}

.rating-star {
  color: #FFA940;
  font-size: 28rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #595959;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.comment-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-date {
  font-size: 24rpx;
  color: #8C8C8C;
}

.comment-actions {
  display: flex;
  gap: 24rpx;
}

.action-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #8C8C8C;
}

.action-icon {
  font-family: "iconfont";
  margin-right: 8rpx;
}

.action-count {
  font-size: 24rpx;
}
</style> 